<template>
  <div class="about">
    {{ name }}
    <h1 v-text="name">v-text</h1>
    <h1 v-html="src"></h1>
    <h1 v-show="show">你看得见我么？css的display:none</h1>
    <h1 v-if="show">v-if，它会让整个dom节点消失！</h1>
    <div>
      <ul v-for="arr in arrays">
        <li>{{ arr }}</li>
      </ul>
    </div>
    <div>
      <input v-bind:type="type" />
      v-bind允许绑定任意的标签属性，让它基于下面data中的值而变化！数据驱动视图！
    </div>
    <div>
      <div v-on:click="dianwo" style="border: 1px black solid">点我</div>
      v-on:缩写是@，它表示事件！{{ num }}
    </div>
    <div>
      <input type="text" v-model="mytext" />{{ mytext }}
      v-model：双向绑定，它是个语法糖！他是用 v-on 和 v-bind 联合触发的！
    </div>
    <mycomponent-vue></mycomponent-vue>
  </div>
</template>
<script>
  //export default表示 引入main.js声明好的vue对象 等同于new Vue({});
  //声子
  import mycomponentVue from '@/components/mycomponent.vue';
  export default {
    data() {
      return {
        name: "mayuhang",
        src: `
        <a href='https://www.woniuxy.com' target='_blank'>蜗牛官网</a>
        <h2>欢迎来到对抗路！</h2>
       `,
        show: true,
        arrays: [1, 2, 3, 4, 5, 6, 7],
        type: "radio",
        num: 0,
        mytext: "",
      };
    },
    methods: {
      dianwo() {
        this.num = this.num + 1;
      },
    },
    components:{
      mycomponentVue
    }
  };
</script>
